<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/userwelcome' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>我的卡包</el-breadcrumb-item>
      <el-breadcrumb-item>领取卡包</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <!-- 四个按钮的跳转 -->
      <!-- 搜索框 -->
      <el-row class="title">
        <!-- 文字 -->
        <el-col span="20"><div class="title-text"></div></el-col>
        <!-- 搜索框 -->
        <el-col :span="4">
          <el-input placeholder="请输入内容" v-model="query" clearable :readonly=true>
            
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="btnSearchCard()"
            ></el-button>
          </el-input>
        </el-col>

        <el-col :span="4" offset="16">
          <el-select v-model="query" filterable placeholder="请选择">
            <el-option
              v-for="item in queryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider content-position="right"
        ><i class="el-icon-orange"></i
      ></el-divider>
      <!-- 卡片 -->
      <el-row :gutter="20">
        <el-col v-for="(item, index) in cardFrom" :key="index" :span="6">
          <el-tooltip
            class="item"
            effect="light"
            :content="item.card_comment"
            placement="top"
          >
            <el-card :body-style="{ padding: '0px' }">
              <el-image :src="card_picture" class="image"></el-image>
              <span class="image-text">{{ item.card_name }}</span>
              <div class="bottom clearfix">
                <el-button type="text" class="bottom-button" @click="cardGet()"
                  >领取</el-button
                >
              </div>
            </el-card>
          </el-tooltip>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "GetCard",
  created() {
    this.cardFrom = JSON.parse(sessionStorage.getItem("cardFrom"));
  },
  data() {
    return {
      //选择的值
      queryOptionsValue:'',
      //选择的值
      queryOptions: [
        {
          value: "交通出行",
          label: "交通出行",
        },
        {
          value: "休闲娱乐",
          label: "休闲娱乐",
        },
        {
          value: "健身运动",
          label: "健身运动",
        },
        {
          value: "其他",
          label: "其他",
        },
        {
          value: "医药健康",
          label: "医药健康",
        },
        {
          value: "学习教育",
          label: "学习教育",
        },
        {
          value: "服饰",
          label: "服饰",
        },
        {
          value: "生活商超",
          label: "生活商超",
        },
        {
          value: "酒店度假",
          label: "酒店度假",
        },
        {
          value: "饮食",
          label: "饮食",
        },
      ],
      // 搜索的内容
      query: "",
      cardFrom: [],
      // 图片的适应
      fits: ["fill", "contain", "cover", "none", "scale-down"],
    };
  },
  methods: {
    cardGet() {
      this.$message.success("领取到了");
      // 发送网络请求，存储卡片
    },
  },
};
</script>

<style lang="less" scoped>
.rank {
  text-align: center;
}
.el-card {
  position: relative;
  .image {
    // /* 模糊效果，与宽高搭配做适当调整，把白边推出边界隐藏掉 */
    // style="width: 150px; height: 150px;margin-left:10px"
    width: 150px;
    height: 150px;
    margin-left: 10px;
  }
  // 文字的css效果
  .image-text {
    display: block;
    position: absolute;
    right: 10px;
    bottom: 100px;
    font-weight: bolder;
    font-family: "微软雅黑", "Dosis", sans-serif;
    font-size: 15px;
  }
  .bottom-button {
    margin-left: 10px;
  }
}
</style>